<div class="docs-section">
    <h1 id="form" class="page-header">列表 form</h1>

    <h2 id="form-base">基本说明</h2>
    <p>
        form控件主要用于提供对表单及表单元素的快捷操作，如对表单数据的获取和设置、表单元素的初始化校验、日期控件、枚举控件等。
    </p>
    <div class="docs-example">
        <form class="form-horizontal">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="col-md-3 control-label">时间</label>
                        <div class="col-md-9">
                            <div class="input-group">
                                <input type="text" class="form-control dolphin_date_picker"
                                       startDate="<%= global.tool.dateFormatter(new Date(), 'yyyy-MM-dd') %>"
                                       name="effectiveTime">
                                <span class="input-group-addon">至</span>
                                <input type="text" class="form-control dolphin_date_picker" name="disActiveTime">
                            </div><!-- /input-group -->
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="col-md-3 control-label">校验</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" dol-validate="required" name="code" />
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="col-md-3 control-label">枚举</label>
                        <div class="col-md-9">
                            <select class="form-control" name="enum" options="sex"></select>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="col-md-3 control-label">正整数</label>
                        <div class="col-md-9">
                            <input type="number" class="form-control" dol-validate="number" name="number" />
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="docs-code">
        <pre>
            <code class="html">&lt;form class="form-horizontal"&gt;
&lt;div class="row"&gt;
    &lt;div class="col-md-6"&gt;
        &lt;div class="form-group"&gt;
            &lt;label class="col-md-3 control-label"&gt;时间&lt;/label&gt;
            &lt;div class="col-md-9"&gt;
                &lt;div class="input-group"&gt;
                    &lt;input type="text" class="form-control dolphin_date_picker"
                           startDate="&lt;%= global.tool.dateFormatter(new Date(), 'yyyy-MM-dd') %&gt;"
                           name="effectiveTime"&gt;
                    &lt;span class="input-group-addon"&gt;至&lt;/span&gt;
                    &lt;input type="text" class="form-control dolphin_date_picker" name="disActiveTime"&gt;
                &lt;/div&gt;&lt;!-- /input-group --&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6"&gt;
        &lt;div class="form-group"&gt;
            &lt;label class="col-md-3 control-label"&gt;校验&lt;/label&gt;
            &lt;div class="col-md-9"&gt;
                &lt;input type="text" class="form-control" dol-validate="required" name="code" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6"&gt;
        &lt;div class="form-group"&gt;
            &lt;label class="col-md-3 control-label"&gt;枚举&lt;/label&gt;
            &lt;div class="col-md-9"&gt;
                &lt;select class="form-control" name="enum" options="sex"&gt;&lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6"&gt;
        &lt;div class="form-group"&gt;
            &lt;label class="col-md-3 control-label"&gt;正整数&lt;/label&gt;
            &lt;div class="col-md-9"&gt;
                &lt;input type="number" class="form-control" dol-validate="number" name="number" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt;</code>
        </pre>
    </div>
    <div class="docs-code">
        <pre>
            <code class="js">//form
Dolphin.form.parse();</code>
        </pre>
    </div>

    <h2 id="form-function">方法</h2>
    <p>
        注：
    </p>
    <ul>
        <li>表单元素以name为标识关键属性。&lt;input name="name" /&gt;或&lt;p class="form-control-static" name="name"&gt;&lt;/p&gt;</li>
        <li>name支持子对象属性的设值和取值，使用方法：&lt;input name="children.name" /&gt;。</li>
    </ul>
    <table class="table table-bordered table-striped docs-param">
        <thead>
            <tr>
                <th>方法</th>
                <th style="width:100px;">参数</th>
                <th>返回值</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>parse</td>
                <td>panel</td>
                <td>无</td>
                <td>
                    对区域内的表单元素（枚举、日期、日期时间、校验）进行初始化，参数说明：<br/>
                    panel：初始化区域(String | jQuery selector)，默认为body
                </td>
            </tr>
            <tr>
                <td>empty</td>
                <td>panel</td>
                <td>无</td>
                <td>
                    清空表单数据，参数说明：<br/>
                    panel：初始化区域(String | jQuery selector)，默认为body
                </td>
            </tr>
            <tr>
                <td>getValue</td>
                <td>panel</td>
                <td>无</td>
                <td>
                    获取表单数据，获取元素为input、select、textarea。input[checkbox]返回值为数组。参数说明：<br/>
                    panel：初始化区域(String | jQuery selector)，默认为body
                </td>
            </tr>
            <tr>
                <td>setValue</td>
                <td>panel</td>
                <td>无</td>
                <td>
                    设置表单数据，设置元素为input、select、textarea、p、span、div。参数说明：<br/>
                    panel：初始化区域(String | jQuery selector)，默认为body
                </td>
            </tr>
            <tr>
                <td>validate</td>
                <td>panel</td>
                <td>Boolean</td>
                <td>
                    统一校验表单数据，遵循<a href="#validate-define">校验规则</a>。参数说明：<br/>
                    panel：初始化区域(String | jQuery selector)，默认为body
                </td>
            </tr>
        </tbody>
    </table>

    <h2 id="form-control">初始化控件</h2>
    <!--<table class="table table-bordered table-striped docs-param">-->
        <!--<thead>-->
            <!--<tr>-->
                <!--<th>方法</th>-->
                <!--<th style="width:100px;">参数</th>-->
                <!--<th>返回值</th>-->
                <!--<th>描述</th>-->
            <!--</tr>-->
        <!--</thead>-->
        <!--<tbody>-->
            <!--&lt;!&ndash;<tr>&ndash;&gt;-->
                <!--&lt;!&ndash;<td>find</td>&ndash;&gt;-->
                <!--&lt;!&ndash;<td>queryStr</td>&ndash;&gt;-->
                <!--&lt;!&ndash;<td>Array&lt;node&gt;</td>&ndash;&gt;-->
                <!--&lt;!&ndash;<td>&ndash;&gt;-->
                    <!--&lt;!&ndash;根据id或name进行模糊查询，返回查询到的所有节点，参数说明：<br/>&ndash;&gt;-->
                    <!--&lt;!&ndash;queryStr：模糊查询条件(String)&ndash;&gt;-->
                <!--&lt;!&ndash;</td>&ndash;&gt;-->
            <!--&lt;!&ndash;</tr>&ndash;&gt;-->
        <!--</tbody>-->
    <!--</table>-->
</div>